<!--
  运营-招聘管理-【招聘职位】
 -->
<template>
  <div class="app-container">
    <div style="margin-bottom: 12px">
      <el-button
        type="success"
        plain
        icon="el-icon-plus"
        size="mini"
        :disabled="leftMultipleSelection.length === 0"
        @click="mutilBtnHandle()"
      >批量还原</el-button>
    </div>
    <!-- 搜索工作栏 -->
    <el-form
      ref="leftQueryForm"
      :model="leftQueryParams"
      size="small"
      :inline="true"
      label-width="78px"
    >
      <el-form-item label="职位名称" prop="jobName">
        <el-input
          v-model="leftQueryParams.jobName"
          placeholder="请输入职位名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="企业名称" prop="companyName">
            <el-input
            v-model="leftQueryParams.companyName"
            placeholder="请输入企业名称"
            clearable
            @keyup.enter.native="handleQuery"
            />
        </el-form-item> -->
      <el-form-item label="工作城市" prop="city">
        <el-cascader
          v-model="leftQueryParams.city"
          :show-all-levels="false"
          :options="provinceAndCityData"
          :props="{ value: 'label' }"
          placeholder="请选择期望城市"
        />
      </el-form-item>
      <el-form-item label="操作人" prop="updater">
        <el-input
          v-model="leftQueryParams.updater"
          placeholder="请输入操作人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-refresh"
          @click="resetQuery"
        >重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="leftList"
      @selection-change="handleLeftChange"
    >
      <!-- @sort-change="
            ({ column, prop, order }) =>
            sortChange('left', { column, prop, order })
        "
        > -->
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" />
      <el-table-column label="职位名称" align="center" prop="jobName" />
      <el-table-column label="招聘企业" align="center" prop="companyName" />
      <el-table-column
        label="工作地点"
        align="center"
        prop="fullWorkAddress"
      />
      <el-table-column label="部门" align="center" prop="department" />
      <el-table-column label="操作人" align="center" prop="updater" />
      <el-table-column
        label="删除日期"
        align="center"
        prop="updateTime"
        sortable
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="btnHandle('check', scope.row)"
          >查看</el-button>
          <!-- 删除 -->
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认还原职位？"
            @confirm="btnHandle('delete', scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-edit"
            >还原</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="leftTotal > 0"
      :total="leftTotal"
      :page.sync="leftQueryParams.pageNo"
      :limit.sync="leftQueryParams.pageSize"
      @pagination="leftGetList"
    />
    <!-- 批量导入职位 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-error="handleFileError"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip text-center">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
          >下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="handleFileError">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看职位详情 -->
    <el-drawer
      title="职位详情"
      size="90%"
      :visible.sync="JobDetailDialog"
      direction="rtl"
    >
      <JobDetail ref="jobDetail" />
    </el-drawer>
  </div>
</template>

<script>
import {
  recoveryEnterpriseJobPage,
  getRecoveryEnterpriseJobById,
  updateBatchRecoveryEnterpriseJob
} from '@/api/company-admin-api/hireManage/index.js'

import {
  businessAreaData,
  provinceAndCityData
} from '@/utils/frontDataDict.js'
import JobEdit from './jobEdit.vue'
import { getBaseHeader } from '@/utils/request'
import { deepClone } from '@/utils/index'
import JobDetail from './jobDetail.vue'

export default {
  name: 'RecycleBin',
  components: {
    JobEdit,
    JobDetail
  },
  data() {
    return {
      leftMultipleSelection: [],
      provinceAndCityData: provinceAndCityData,
      activeCheck: 'jobForm',
      reason: '',
      auditDialog: false,
      checkResult: '1',
      activeName: '1',
      // 企业行业类型数据，二级联动
      businessAreaData: businessAreaData,
      // 遮罩层
      loading: true,
      // 发布中-总条数
      leftTotal: 0,
      // 暂停发布-总条数
      centerTotal: 0,
      // 未发布-总条数
      rightTotal: 0,
      // 发布中列表
      leftList: [],
      // 暂停发布列表
      centerList: [],
      // 未发布列表
      rightList: [],
      // 弹出层标题
      title: '',
      // 待审核查询参数
      leftQueryParams: {
        pageNo: 1,
        pageSize: 10,
        jobName: '',
        updater: '',
        // companyName: '',
        city: '',
        sortField: { field: '', order: '' },
        flag: ['2'] // 职位状态 jobHireStatus (string)：0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回
      },
      // 职位信息表
      jobForm: {
        jobName: '', // 职位名称
        education: '', // 学历要求
        identify: '0', // 招聘对象 0在校 1应届,默认0
        city: '', // 工作城市
        workAddress: '', // 工作地址，非城市
        lowestSalary: '', // 最低薪资
        highestSalary: '', // 最高薪资
        companyName: '', // 招聘企业名称
        companyId: '', // 企业id
        welfareTags: [], // 福利标签
        jobDescription: '', // 职位描述
        workPeriod: '', // 工作周期
        practicePeriod: '', // 实习周期
        jobLanguage: '', // 工作语言
        recruitmentCount: '', // 招聘人数
        clickCount: 0, // 职位点击量，写死，后端冗余字段
        department: '', // 部门
        postCount: 0, // 职位投递量，写死，后端冗余字段
        status: 0, // 职位状态(string)：0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回
        salaryUnit: 'daily_salary', // 薪资类型 daily_salary weekly_salary monthly_salary annual_salary
        phone: '' // 联系人手机号
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: getBaseHeader(),
        // 上传的地址
        url:
            process.env.VUE_APP_BASE_API + '/admin-api/member/job/import-excel'
      },
      currentJob: null,
      JobDetailDialog: false,
      isEdit: false,
      companyInfo: null
    }
  },
  created() {
    // this.leftGetList()
  },
  methods: {
    // 多选
    handleLeftChange(val) {
      this.leftMultipleSelection = val
    },

    mutilBtnHandle(e) {
      if (this.leftMultipleSelection.length <= 0) return
      this.$modal
        .confirm(`确认批量还原?`)
        .then(() => {
          this.btnHandle('', this.leftMultipleSelection, true)
        })
        .catch(() => {})
    },
    btnHandle(handleType, row, isArr = false) {
      if (handleType == 'check') {
        getRecoveryEnterpriseJobById(row.id).then((res) => {
          if (res.code === 0 && res.data) {
            this.JobDetailDialog = true
            setTimeout(() => {
              this.$refs.jobDetail.open(res.data)
            })
          }
        })
      } else {
        let ids = []
        if (isArr) {
          row.forEach(v => {
            ids.push(v.id)
          })
        } else {
          ids = [row.id]
        }
        updateBatchRecoveryEnterpriseJob({ ids }).then(res => {
          if (res.data) {
            this.$message.success('还原成功')
            this.leftGetList()
          }
        })
      }
    },
    importTemplate() {
      window.open(
        'https://demo-oss.oss-cn-beijing.aliyuncs.com/xlsx/0d0db81d60cb4128b5eec657092e0cf2.xlsx',
        '_blank'
      )
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 上传报错，清除文件并关闭
    handleFileError() {
      this.$refs.upload.clearFiles()
      this.upload.open = false
      this.upload.isUploading = false
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      if (response.code !== 0) {
        this.$modal.msgError(response.msg)
        return
      }
      this.$refs.upload.clearFiles()
      this.upload.open = false
      this.upload.isUploading = false
      // 拼接提示语
      const data = response.data
      let text = '创建成功数量：' + data.updateJobnames.length
      for (const username of data.updateJobnames) {
        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username
      }
      text += '<br />更新失败数量：' + Object.keys(data.failureJobnames).length
      for (const username in data.failureJobnames) {
        text +=
            '<br />&nbsp;&nbsp;&nbsp;&nbsp;' +
            username +
            '：' +
            data.failureJobnames[username]
      }
      this.$alert(text, '导入结果', { dangerouslyUseHTMLString: true })
      this.handleQuery()
    },
    // 发布中列表数据
    leftGetList() {
      this.loading = true
      // 处理查询参数
      const params = JSON.parse(JSON.stringify(this.leftQueryParams))
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key]
        }
      }
      if (params.sortField.order === '') {
        delete params.sortField
      }
      params.city = params?.city?.length === 2 ? params.city[1] : ''
      // 执行查询
      recoveryEnterpriseJobPage(params).then((res) => {
        res.data.list.map((item) => {
          try {
            // 临时变量，工作地址
            item.fullWorkAddress =
                JSON.parse(item.city).join('') + (item.workAddress || '')
          } catch (error) {
            item.fullWorkAddress = ''
          }
          try {
            item.welfareTags = JSON.parse(item.welfareTags)
          } catch (error) {
            item.welfareTags = []
          }
          // 教育经历
          try {
            item.education = JSON.parse(item.education)
          } catch (error) {
            item.education = []
          }
          // 城市
          try {
            item.city = JSON.parse(item.city)
          } catch (error) {
            item.city = []
          }
        })
        this.leftList = res.data.list
        this.leftTotal = res.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.leftQueryParams.pageNo = 1
      this.leftGetList()
    },
    // 重制搜索条件
    resetQuery() {
      this.resetForm('leftQueryForm')
      this.handleQuery()
    },
    /** 打开认证详情页面 */
    handleCheck(row) {
      this.$refs.jobEdit.open(row)
    }
  }
}
</script>

